<template>
    <div class="sidebar">
            <a-menu             
                mode="inline"    
                :inline-collapsed="collapsed"
                class="sidebar-el-menu"
                :selectedKeys="[$route.path]"
                 @select="handleSelect"
            >     
                <a-menu-item :key="item.index" v-for="item in items"  >
                    <a-icon :type="item.icon" />
                    <span>{{item.title}}</span>
                </a-menu-item>            
            </a-menu>
        </div>
</template>

<script>
    import bus from '../components/bus'
    export default {
        data(){
            return{
                collapsed: false,
                items:[],
                page:[],
                admin: [
                    {
                        icon: 'qrcode',
                        index: '/mainPage',
                        title: '图文列表'
                    }
                ]
            }
        },
        computed:{
            onRoutes(){
                return this.$route.path.replace('/','');
            }
        },
        created(){
            // 通过 Event Bus 进行组件间通信，来折叠侧边栏
            bus.$on('collapse', msg => {
                this.collapsed = msg;
            })
        },
        mounted() {
            this.items = this.admin;
            if(sessionStorage.getItem('thePage')){
                this.page = []
                this.page.push(sessionStorage.getItem('thePage'))
            }
            else{
                this.page = ["/mainPage"]
            }
            // if(JSON.parse(sessionStorage.userMess).role=='管理员'){
            //     this.items=this.admin;
            // }else{
            //     this.items=this.Charge;
            // }
        },
        methods:{
            toggleCollapsed() {
                this.collapsed = !this.collapsed;
            },
            handleSelect ({ item, key, selectedKeys }) {
                this.$router.push(key);
                console.log(key)
                sessionStorage.setItem('thePage', key);
            }
        }
    }
</script>

<style scoped>
    .sidebar{
        display: block;
        position: absolute;
        left: 0;
        top: 70px;
        bottom:0;
        overflow-y: scroll;
    }
    .sidebar::-webkit-scrollbar{
        width: 0;
    }
    .sidebar-el-menu:not(.el-menu--collapse){
        width: 220px;
    }
    .sidebar > ul {
        height:100%;
    }
</style>
